<script setup lang="ts">

import {useMenuStore} from "@/store/menusStroe.ts";
import {ElNotification, FormInstance, FormRules} from 'element-plus'
import {CreateMenu} from "@/api/menu";
import {CreateMenuItem} from "@/api/menu/type.ts";


const menuStore = useMenuStore()
const ruleFormRef = ref<FormInstance>()
const useMenu = useMenuStore()
const loading = ref(false)
const rules = reactive<FormRules<CreateMenuItem>>({
  name: [
    {required: true, message: '请输入菜单名称', trigger: 'blur'},
    {max: 10, message: '长度最大10个字符', trigger: 'blur'},
  ],
  url: [
    {required: true, message: '请输入菜单路径', trigger: 'blur'},
  ],
  route_name: [{
    required: true, message: '请输入路由名称', trigger: 'blur'
  }],
  component: [
    {
      required: false,
      validator: (rule, value, callback) => {
        console.log(rule)
        if (!value) {
          // 如果值为空，则验证通过（因为required为false）
          callback();
        } else {
          // 正则表达式检查以.vue结尾且包含至少一个/
          const regex = /^\/.*\.vue$/;
          if (regex.test(value)) {
            callback(); // 验证通过
          } else {
            callback(new Error('组件路径必须以 ".vue" 结尾且包含至少一个 "/"'));
          }
        }
      },
      trigger: 'blur'
    }
  ],

  icon: [
    {required: true, message: '请输入菜单图标', trigger: 'blur'},
  ]
})

const formData = reactive<CreateMenuItem>({
  name: '',
  route_name: "",
  url: "",
  component: "",
  icon: "",

})

const submitClick = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid) => {
    if (valid) {
      loading.value = true
      // 验证成功
      const res = await CreateMenu(formData)
      console.log(res)
      if (res.code === 200) {
        loading.value = false
        await menuStore.getMenuListStore()
        ElNotification({
          message: res.msg,
          type: 'success',
        })
        menuStore.addMenu_drawer = false
      } else {
        loading.value = false
        ElNotification({
          message: res.msg,
          type: 'error',
        })
      }
    }
  })
}

const clearClick = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

</script>

<template>
  <div>
    <el-drawer v-model="useMenu.addMenu_drawer" size="35%">
      <template #header>
        <h4>新增菜单</h4>
      </template>
      <template #default>
        <el-form ref="ruleFormRef" :model="formData" label-width="auto" class="demo-ruleForm" :inline="true"
                 :rules="rules">
          <el-form-item label="菜单名称" prop="name">
            <el-input v-model="formData.name"/>
          </el-form-item>
          <el-form-item label="菜单路径" prop="url">
            <el-input v-model="formData.url"/>
          </el-form-item>
          <el-form-item label="路由名称" prop="route_name">
            <el-input v-model="formData.route_name"/>
          </el-form-item>
          <el-form-item label="路由组件" prop="component">
            <el-input placeholder="例:/views/home/Home.vue" v-model="formData.component"/>
          </el-form-item>
          <el-form-item label="图标" prop="icon">
            <el-input placeholder="例:HomeFilled" v-model="formData.icon"/>
            <a href="https://element-plus.org/zh-CN/component/icon.html" target="_blank"
               style="color: blue; font-size: 12px;">
              选择图标
            </a>
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="clearClick(ruleFormRef)">清除</el-button>
          <el-button type="primary" :loading="loading" @click="submitClick(ruleFormRef)">提交</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<style scoped lang="scss">

</style>